<template>
    <transition name="slide">
         <div class="singer-detail">ssssss </div>
    </transition>
</template>

<script>

import { mapGetters } from 'vuex';
import { ERR_OK , commonParams } from  'api/config'
import { getSingerDetail } from 'api/singer'
import { createSong } from 'common/js/song'
export default{
    computed: {
        ...mapGetters([
            'singer',
        ])
    },
    data(){

        return{
            songs: {}
        }
    },
    created () {
        // console.log(this.singer);
        this._getSingerDetail();
    },
    methods: {
        _getSingerDetail(){
            if(!this.singer.id){
                this.$router.push('/singer');
                return;
            }
            getSingerDetail(this.singer.id).then((res)=>{
                if(res.code == ERR_OK){
                    this.songs = this._normalizeSongs(res.data.list);
                    console.log(this.songs);
                }
            },(err)=>{
                
            })
        },
        _normalizeSongs(list){
            let ret = [];
            list.forEach((item) => {
                let { musicData } = item;
                // console.log(musicData);
                if(musicData.songid && musicData.albummid){
                   ret.push(createSong(musicData));
                }
            });
            return ret ;
        }
    }
}
    
</script>

<style lang="stylus" >
   @import "~common/stylus/variable"
    .singer-detail
        position: fixed
        z-index: 100
        top: 0
        left: 0
        bottom: 0
        right: 0
        background: $color-background
    .slide-enter-active, .slide-leave-active {
        transition : all 0.3s;
    } 

    .slide-enter, .slider-leave-to{
        transform: translate3d(100%,0,0);
    }
</style>

